<template>
  <div :class="['android-device-item', { 'item-disabled': isDisabled }]">
    <div class="device-info">
      <div class="left-section">
        <span class="device-id">
          <i :class="['iconfont', renderIcon(device.model)]"></i>
          {{ device.id }}
        </span>
        <span class="device-status">{{ device.status }}</span>
      </div>
      <div class="right-section">
        <span class="device-model">{{ device.model }}</span>
      </div>
    </div>
    <device-config :device="device" :offline="isDisabled" />
    <div v-if="isDisabled" class="disable-mask"></div>
  </div>
</template>

<script lang="ts">
import { VueComponent } from '@/vue/vue-component';
import { Component, Prop } from 'vue-property-decorator';
import { AndroidDevice } from '@/main/adb/android-device';
import DeviceConfig from './DeviceConfig.vue';
import { getDefaultConfig, getDeviceIconByModel } from '@/util/device-utils';
import { DeviceConfiguration } from '@/type/typings';

@Component({
  name: 'android-device-item',
  components: { DeviceConfig }
})
export default class AndroidDeviceItem extends VueComponent {
  @Prop({ type: Object, required: true }) readonly device!: AndroidDevice;

  config: DeviceConfiguration = getDefaultConfig();

  get isDisabled() {
    return this.device.status === 'offline';
  }

  renderIcon(model: string) {
    return getDeviceIconByModel(model);
  }
}
</script>

<style lang="less">
@import '~@/assets/styles/variables.less';

.android-device-item {
  font-size: 14px;
  color: #fff;
  background: rgba(#000, 0.6);
  box-sizing: border-box;
  border-radius: 2px;
  margin: 0 10px 10px;
  position: relative;

  .device-info {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(#000, 0.5);

    .left-section {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      span {
        margin-right: 20px;
      }
    }

    .right-section {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      span {
        margin-left: 20px;
      }
    }

    span {
      display: inline-flex;
      user-select: text;
      align-items: center;
      justify-content: center;

      &::selection {
        background: @color-primray;
        color: #fff;
      }

      &:last-child {
        border-right: 0;
      }
    }

    .device-id {
      font-weight: bold;
      color: #009688;

      i {
        margin-right: 5px;
        font-size: 18px;
        font-weight: normal;
      }
    }

    .device-status.offline {
      color: gray;
    }
  }

  &.item-disabled {
    color: @global-font-disabled-color;
  }

  .disable-mask {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: not-allowed;
  }
}
</style>
